<template>
    <div class="from">
        <van-field v-model="tel" clearable label="手机号" placeholder="请输入手机号" />
        <div class="my-button">
            <van-button type="danger" :disabled="flag" block @click="checkTel">下一步</van-button>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Field, Button, Dialog } from "vant";

// 导入严正手机号的方法
import { doCheckPhone } from '@/api/user'

Vue.use(Field);
Vue.use(Button);
Vue.use(Dialog);

export default {
    data() {
        return { tel: "" };
    },
    methods: {
        checkTel() {
            //   alert("注册成功");
            // this.$router.push("/register/step2");
            doCheckPhone({ tel: this.tel })
                .then(res => {
                    // console.log(res);
                    if (res.code == '10005') {
                        Dialog.confirm({
                            message: res.message,
                            confirmButtonColor: '#f66',
                            cancelButtonText: '取消',
                            confirmButtonText: '直接登录'
                        })
                            .then(res => {
                                // console.log('跳转登录');
                                this.$router.push('/login')
                            })
                            .catch(() => { })
                    } else {
                        Dialog.confirm({
                            message: '我们将发送短信验证码到您的手机',
                            confirmButtonText: '确定',
                            confirmButtonColor: '#f66',
                            cancelButtonText: '取消'
                        }).then(() => {
                            // console.log('跳转到step2');
                            this.$router.push('/register/step2')
                            // 将手机号存放到本地，因为另一个页面需要发送验证码
                            localStorage.setItem('tel', this.tel)
                        }).catch(() => {
                        })
                    }
                })
        },
    },
    computed: {
        flag() {
            // 如果手机号没问题就直接返回一个 true 否则 false
            if (
                /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(
                    this.tel
                )
            ) {
                return false;
            } else {
                return true;
            }
        },
    },
};
</script>
